<template>
  <div class="content">
    <div class="head">
      <el-row :gutter="8">
        <el-col :span="2" :offset="0">
          <span style="line-height: 40px;">目标组织:</span>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-select v-model="team_choice_item" placeholder="请选择">
            <el-option
              v-for="(item,index) in team_list_data"
              :key="index"
              :label="item.teamName"
              :value="item.teamName"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-input placeholder="搜索用户" v-model="team_search_input" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="team_Search()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-button
            v-if="team_is_seacrch_state"
            @click="team_Search_Return()"
            type="primary"
            icon="el-icon-top-left"
          >返回</el-button>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button @click="team_Open_Add()" type="primary" icon="el-icon-plus">添加用户</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="list">
      <el-table :data="team_user_list" height="600" stripe fit v-loading="loading">
        <el-table-column prop="userName" label="姓名" width="150"></el-table-column>
        <el-table-column prop="spaceWrite" label="是否拥有修改权限">
          <template slot-scope="scope">
            <span v-if="scope.row.spaceWrite == 0">
              <i class="el-icon-check"></i>
            </span>

            <span v-else>
              <i class="el-icon-close"></i>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="teamRole" label="角色" width="120"></el-table-column>
        <el-table-column prop="createTime" label="加入时间">
          <template slot-scope="scope">{{rTime(scope.row.createTime)}}</template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间">
          <template slot-scope="scope">{{rTime(scope.row.updateTime)}}</template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row :gutter="20">
              <el-col :span="10" :offset="0">
                <el-button @click="team_Open_Edit(scope.row)" type="primary" size="small">编辑</el-button>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-button @click="team_Remove(scope.row.userName)" type="danger" size="small">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <team-edit-drawer v-model="team_edit_drawer_data" />
  </div>
</template>

<script>
import { findByUserName, findByTeamName, addTeam, removeTeam } from '@/api/requests/team.js'
import team_edit_drawer from '@/views/team/team_edit_drawer'
export default {
  components: {
    'team-edit-drawer': team_edit_drawer
  },
  data () {
    return {
      loading: false,
      team_list_data: [],
      team_choice_item: '',
      team_choice_item_college: '',
      team_user_list: [],
      team_edit_drawer_data: {
        visible: false,
        data: {}
      },
      team_search_input: '',
      team_is_seacrch_state: false,
    }
  }, watch: {
    team_choice_item (val) {
      this.team_Get_User_List(val)

    },
    team_edit_drawer_data: {
      handler (val, oldVal) {
        if (val.visible == false && val.data.over == true) {
          val.data = {}
          this.team_Get_User_List(this.team_choice_item)
        }
      },
      deep: true

    }
  },
  created () {
    findByUserName().then(res => {
      this.team_list_data = res.data
      let record = localStorage.getItem('team')
      if (record != undefined && record.indexOf('学院') == -1) {
        this.team_choice_item = record
      } else {
        this.team_choice_item = this.team_list_data[0].teamName
      }
    })
  },
  methods: {
    team_Get_User_List (val) {
      this.loading = true
      setTimeout(() => {
        findByTeamName(val).then(res => {
          this.team_user_list = res
          this.team_choice_item_college = res[0].collegeName
          this.loading = false
        })
      }, 1000)


    },
    team_Open_Edit (val) {
      this.team_edit_drawer_data = {
        visible: true,
        data: val
      }
    },
    team_Open_Add () {
      this.team_edit_drawer_data = {
        visible: true,
        data: {
          teamName: this.team_choice_item,
          collegeName: this.team_choice_item_college
        }
      }
    },
    team_Remove (userName) {
      removeTeam(userName, this.team_choice_item).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        }
        this.team_Search_Return()
      })
    },
    team_Search () {
      this.team_is_seacrch_state = true
      let text = this.team_search_input
      let temp = this.team_user_list
      this.team_user_list = []
      temp.forEach(item => {
        if (item.userName.indexOf(text) != -1) {
          this.team_user_list.push(item)
        }
      })
    },
    team_Search_Return () {
      this.team_is_seacrch_state = false
      this.team_Get_User_List(this.team_choice_item)
    },
    rTime (date) {
      let json_date = new Date(date).toJSON();
      return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
  },
}
</script>
<style lang="scss" scoped>
.content {
    padding: 10px 5px 50px 50px;
    // text-align: center;
    .list {
        height: 75vh;
        margin-top: 20px;
        padding: 10px;
        overflow: auto;
        border: 1px solid #ebedf0;
        background-color: #fff;
    }
}
</style>       